import { useLocalSearchParams } from "expo-router";
import { useRouter } from "expo-router";
import {
  StyleSheet,
  SafeAreaView,
  ScrollView,
  View,
  Image,
  TouchableOpacity,
  TextInput,
} from "react-native";
import { ThemedText } from "@/components/ThemedText";
import { ThemedView } from "@/components/ThemedView";
import { Colors } from "@/constants/Colors";
import { Ionicons } from "@expo/vector-icons";

export default function CategorySearch() {
  const { id, name } = useLocalSearchParams<{ id: string; name: string }>();
  const router = useRouter();

  return (
    <SafeAreaView style={styles.container}>
      <ThemedView style={styles.content}>
        {/* 搜索头部 */}
        <View style={styles.header}>
          <TouchableOpacity
            style={styles.backButton}
            onPress={() => router.back()}
          >
            <Ionicons name="arrow-back" size={24} color="#333" />
          </TouchableOpacity>
          <View style={styles.searchBar}>
            <Ionicons name="search" size={20} color="#999" />
            <TextInput
              style={styles.searchInput}
              placeholder={`搜索${name}分类商品`}
              placeholderTextColor="#999"
            />
          </View>
        </View>

        {/* 筛选条件 */}
        <View style={styles.filterBar}>
          <TouchableOpacity style={styles.filterItem}>
            <ThemedText>综合</ThemedText>
            <Ionicons name="chevron-down" size={16} color="#666" />
          </TouchableOpacity>
          <TouchableOpacity style={styles.filterItem}>
            <ThemedText>销量</ThemedText>
          </TouchableOpacity>
          <TouchableOpacity style={styles.filterItem}>
            <ThemedText>价格</ThemedText>
            <Ionicons name="swap-vertical" size={16} color="#666" />
          </TouchableOpacity>
          <TouchableOpacity style={styles.filterItem}>
            <ThemedText>筛选</ThemedText>
            <Ionicons name="filter" size={16} color="#666" />
          </TouchableOpacity>
        </View>

        {/* 商品列表 */}
        <ScrollView style={styles.productList}>
          {/* 示例商品项 */}
          <View style={styles.productItem}>
            <Image
              source={{
                uri: "https://tse2-mm.cn.bing.net/th/id/OIP-C.jdP04yEoxG10mcywseQj7gAAAA?rs=1&pid=ImgDetMain",
              }}
              style={styles.productImage}
            />
            <View style={styles.productInfo}>
              <ThemedText numberOfLines={2} style={styles.productTitle}>
                示例商品名称 - {id}类目
              </ThemedText>
              <ThemedText style={styles.price}>¥299.00</ThemedText>
            </View>
          </View>
        </ScrollView>
      </ThemedView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.background.primary,
  },
  content: {
    flex: 1,
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    padding: 10,
    gap: 10,
  },
  backButton: {
    padding: 5,
  },
  searchBar: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: Colors.background.secondary,
    borderRadius: 16,
    paddingHorizontal: 10,
    height: 32,
  },
  searchInput: {
    flex: 1,
    marginLeft: 8,
    fontSize: 14,
  },
  filterBar: {
    flexDirection: "row",
    justifyContent: "space-around",
    padding: 10,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: Colors.border.light,
  },
  filterItem: {
    flexDirection: "row",
    alignItems: "center",
    gap: 4,
  },
  productList: {
    padding: 10,
  },
  productItem: {
    backgroundColor: Colors.background.primary,
    borderRadius: 8,
    marginBottom: 10,
    overflow: "hidden",
  },
  productImage: {
    width: "100%",
    height: 200,
    backgroundColor: Colors.background.secondary,
  },
  productInfo: {
    padding: 10,
  },
  productTitle: {
    fontSize: 14,
    color: Colors.text.primary,
    marginBottom: 6,
  },
  price: {
    fontSize: 16,
    color: Colors.functional.price,
    fontWeight: "bold",
  },
});
